<template>
	<el-container class="tl-ali-oss" :class="{ 'is-visible': visible }" @click="noop">
		<!-- 上传项（如上传中、完成项）显示以及取消、关闭按钮操作 -->
		<el-header class="tl-ali-oss-header flex justify-between align-center" height="38px">
			<div class="tl-ali-oss-title" v-if="upload_list.length > 0">
				<span v-if="uploading_num > 0">正在上传 {{ uploading_num }} 项，</span>
				<span v-if="success_num > 0">已完成 {{ success_num }} 项，</span>
				<span>共 {{ upload_list.length }} 项</span>
			</div>
			<div class="tl-ali-oss-title" v-else>上传文件</div>
			<div class="tl-ali-oss-action">
				<el-button type="text" class="is-close" icon="el-icon-minus" @click="handleTriggerEvent('handleClose')" />
				<el-button type="text" class="is-cancel" icon="bx-icon-quxiao" @click.stop="handleTriggerEvent('handleCancelUpload')" />
			</div>
		</el-header>
		<div ref="main" class="tl-ali-oss-main">
			<!--上传进度组件-->
			<tl-ali-oss-upload
				ref="upload"
				:visible.sync="visible"
				:file-list.sync="upload_list"
				v-bind="upload_options"
				@change-all="handleFileChangeAll"
				@progress="handleFileProgress"
				@success="handleFileSuccess"
				@error="handleFileError"
				@exceed="handleFileExceed"
				@change="handleFileChange"
			/>
		</div>
	</el-container>
</template>

<script>
import TlAliOssUpload from './upload';
import { Upload, Button } from 'element-ui';

const uploadProps = { ...TlAliOssUpload.props };
delete uploadProps.visible;
delete uploadProps.files;
export default {
	name: 'tl-ali-oss',
	components: {
		[Upload.name]: Upload,
		[Button.name]: Button,
		[TlAliOssUpload.name]: TlAliOssUpload,
	},
	directives: {},
	data() {
		return {
			upload_list: [],
			visible: false,
		};
	},
	props: {
		...uploadProps,
	},
	computed: {
		upload_options() {
			const $props = {};
			for (let key in uploadProps) {
				$props[key] = this[key];
			}
			return $props;
		},
		success_num() {
			const list = this.upload_list.filter(file => file.status === 'success');
			return list.length;
		},
		uploading_num() {
			const list = this.upload_list.filter(file => file.status === 'uploading');
			return list.length;
		},
	},
	watch: {},
	methods: {
		btnTrigger() {
			this.handleTriggerEvent('btnTrigger');
		},
		getUploadData(key) {
			if (!key || typeof key !== 'string') return;
			return this.$refs.upload && this.$refs.upload[key];
		},
		handleTriggerEvent(funcKey, ...args) {
			if (!funcKey || typeof funcKey !== 'string') return;
			const func = this.$refs.upload && this.$refs.upload[funcKey];
			typeof func === 'function' && func(...args);
		},
		handleFileChangeAll(...args) {
			this.$emit('change-all', ...args);
		},
		handleFileChange(...args) {
			this.$emit('change', ...args);
		},
		handleFileProgress(...args) {
			this.$emit('progress', ...args);
		},
		handleFileSuccess(...args) {
			this.$emit('success', ...args);
		},
		handleFileError(...args) {
			this.$emit('error', ...args);
		},
		handleFileExceed(...args) {
			this.$emit('exceed', ...args);
		},
	},
};
</script>
<style lang="scss" scoped>
.tl-ali-oss {
	position: fixed;
	z-index: 51;
	right: 24px;

	width: 512px;
	border-radius: 12px;
	border: 0.5px solid #e5e5e5;
	overflow: hidden;
	background: #f5f5f5;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.15);
	transition: $transition;
	transition-property: bottom, transform;
	bottom: 0;
	transform: translateY(100%);

	&.is-visible {
		bottom: 24px;
		transform: translateY(0);
	}

	.tl-ali-oss-header {
		background: #f5f5f5;
		padding-left: 14px;
		padding-right: 14px;
		border: 0;
		border-bottom: 0.5px solid #e5e5e5;
	}

	.tl-ali-oss-action {
		> .el-button {
			color: #7a7a7a;
			font-size: 16px;
			padding: 0;
		}
	}

	.tl-ali-oss-main {
		::v-deep {
			.tl-upload-progress {
				max-height: 180px;
				overflow: auto;
			}
		}
	}
}
</style>
